import React from 'react';
import {  TabBar } from 'antd-mobile';
import { Route, Switch, useHistory, useLocation,  } from 'react-router-dom';
import { AppOutline, MessageOutline, UnorderedListOutline, UserOutline, } from 'antd-mobile-icons';
import Welcome from './welcome';
import User from './user';
import Fails from './fails';
import Me from './me';

const Dashboard = () => {
    const history = useHistory();
    const location = useLocation();
    const { pathname } = location;
    const setRouteActive = (value) => {
        history.push(value);
    };
    const tabs = [
        {
            key: '/dashboard/welcome',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/dashboard/user',
            title: '用户',
            icon: <UnorderedListOutline />,
        },
        {
            key: '/dashboard/cinema',
            title: '影院',
            icon: <MessageOutline />,
        },
        {
            key: '/dashboard/me',
            title: '个人',
            icon: <UserOutline />,
        },
    ];
    return (<TabBar
        activeKey={pathname}
        onChange={value => setRouteActive(value)}
        style={{ position: 'fixed', bottom: 0, width: '100%', backgroundColor:'white' }}>
        {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} />))}
    </TabBar>);
};

const Need = () => {
    return (
        <div style={{marginBottom:'10%'}}>
            <div >
                <Switch>
                    <Route exact path='/dashboard/welcome'>
                        <Welcome />
                    </Route>
                    <Route exact path='/dashboard/user'>
                        <User />
                    </Route>
                    <Route exact path='/dashboard/cinema'>
                        <Fails />
                    </Route>
                    <Route exact path='/dashboard/me'>
                        <Me />
                    </Route>
                </Switch>
            </div>
            <div >
                <Dashboard />
            </div>
        </div>
    )
};
export default Need
